// src/CustomInput.js  
import React, { useState, useRef,useEffect } from 'react';  
import "../shou/shou.css"// 引入CSS样式  
  
const CustomInput = () => {  
    const [keyboardVisible, setKeyboardVisible] = useState(false);  
    const inputRef = useRef(null);  
    const keyboardContainerRef = useRef(null);  
    
    useEffect(() => {  
      // 当组件挂载时，添加全局点击事件监听器  
      const handleGlobalClick = (event) => {  
        // 检查点击事件的目标是否是输入框或键盘容器内的元素  
        if (  
          inputRef.current &&  
          !inputRef.current.contains(event.target) &&  
          keyboardContainerRef.current &&  
          !keyboardContainerRef.current.contains(event.target)  
        ) {  
          // 如果不是，则隐藏键盘（但在这里我们不做任何操作以保持键盘显示）  
          // setKeyboardVisible(false); // 这行代码被注释掉了  
        }  
      };  
    
      document.addEventListener('click', handleGlobalClick);  
    
      // 清理函数：当组件卸载时移除事件监听器  
      return () => {  
        document.removeEventListener('click', handleGlobalClick);  
      };  
    }, []); // 空依赖数组表示这个effect只在组件挂载和卸载时运行一次  
    
    const handleFocus = () => {  
      setKeyboardVisible(true);  
    };  
    
    const handleBlur = () => {  
      // 在这里我们不做任何事情，因为我们要让用户通过点击取消或完成来控制键盘的隐藏  
    };  
    
    const handleKeyPress = (letter) => {  
      const currentValue = inputRef.current.value;  
      inputRef.current.value = currentValue + letter;  
    };  
    
    const handleCancel = () => {  
      // 清除输入框内容并隐藏键盘  
      inputRef.current.value = '';  
      setKeyboardVisible(false);  
    };  
    
    const handleDone = () => {  
      // 执行完成操作（如提交表单），然后隐藏键盘  
      // 这里可以添加提交表单的逻辑  
      setKeyboardVisible(false);  
    };  
    return (  
        <div className="custom-input-container">  
          <input  
            // 省略了部分未修改的属性...  
          />  
          {keyboardVisible && (  
            <div className="keyboard">  
              <div className="keyboard-row">  
                {/* 省略了部分未修改的代码... */}  
              </div>  
              <div className="keyboard-row">  
                {/* 省略了部分未修改的代码... */}  
              </div>  
              <div className="keyboard-row">  
                {/* 省略了部分未修改的代码... */}  
              </div>  
              <div className="keyboard-row">  
                {/* 添加了取消和完成按钮 */}  
                <button onClick={() => setKeyboardVisible(false)}>取消</button>  
                <button  
                  onClick={() => {  
                    // 这里可以添加拼音到汉字的转换逻辑  
                    // 但由于实现复杂，这里只是简单隐藏键盘并清空输入框作为示例  
                    inputRef.current.value = ''; // 实际应用中，你可能需要处理转换后的结果  
                    setKeyboardVisible(false);  
                  }}  
                >  
                  完成  
                </button>  
              </div>  
            </div>  
          )}  
        </div>  
      );  
    };  
    
  export default CustomInput;